<template>
  <div>
    <div class="nav">
      <i-tabs :current="currentChild" scroll color="#b4282d">
          <i-tab @click="currentItem(menu)" :title="menu.name" :key="menu.id" v-for="menu in menuList"></i-tab>
      </i-tabs>
    </div>
    <div class="goodsWrap" id="goodsWrap">
      <div class="title">
        <h1>{{currentCategory.front_desc}}</h1>
        <p>{{currentCategory.front_name}}</p>
      </div>
      <div class="goodsList">
        <v-goods :goods="goods" :key="index" v-for="(goods,index) in goodsList"></v-goods>
      </div>
    </div>
    <v-more :isMore="isMore"></v-more>
  </div>
</template>

<script>
import {get} from '@/utils'
import vGoods from '@/components/goods'
import vMore from '@/components/more'

export default {
  data () {
    return {
      currentChild: '',
      current: '',
      menuList: [],
      goodsList: [],
      currentCategory: {},
      page: 0,
      pageSize: 10,
      isMore: false
    }
  },
  mounted () {
    this.init()
    let {id, name} = this.$root.$mp.query
    this.current = id
    this.title = name
    wx.setNavigationBarTitle({
      title: name
    })
    this.getMenu()
  },
  methods: {
    currentItem (menu) {
      this.goodsList = []
      this.currentChild = menu.id
      this.currentCategory = menu
      this.getGoods()
    },
    async getMenu () {
      const res = await get('/weapp/category/currentCategory', {
        id: this.current
      })
      this.menuList = res.currentCategory
      let currentId = this.$root.$mp.query.currentId
      if (currentId) {
        this.currentChild = currentId
        this.currentCategory = this.menuList.filter((item) => {
          return item.id === Number(currentId)
        })[0]
      } else {
        this.currentChild = this.menuList[0].id
        this.currentCategory = this.menuList[0]
      }
      this.getGoods()
    },
    async getGoods () {
      const res = await get('/weapp/goods/goodsList', {
        categoryId: this.currentChild,
        page: this.page,
        pageSize: this.pageSize
      })
      if (res.goodsList.length < 10) {
        this.isMore = true
      }
      this.goodsList = this.goodsList.concat(res.goodsList)
      wx.hideLoading()
    },
    init () {
      this.menuList = []
      this.page = 0
      this.goodsList = []
      this.isMore = false
      this.currentChild = ''
      this.currentCategory = {}
    }
  },
  onReachBottom () {
    if (this.isMore) return
    this.page = this.page + 1
    wx.showLoading({
      title: '加载中'
    })
    this.getGoods()
  },
  components: {
    vGoods,
    vMore
  }
}
</script>

<style lang="less" scoped>
.nav{
  width: 100%;
  background: #fff;
  padding-left: 20rpx;
  position: fixed;
  top:0;
  left: 0;
  z-index: 99;
}
.goodsWrap{
  margin-top: 42px;
  .title{
    min-height: 120rpx;
    text-align: center;
    background: #fff;
    h1{
      min-height: 60rpx;
      line-height: 60rpx;
      font-size: 32rpx;
      color: #000;
    }
    p{
      font-size: 28rpx;
      color: #9c9c9c;
    }
  }
  .goodsList{
    width: calc(100% - 10rpx);
    padding: 0 5rpx;
    background-color: #f3f5f7;
  }
}
</style>
